<template>
  <!-- 技术生命周期 -->
  <div>
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Ecolors from "@/utils/chartColors";
import { resize, spaceTxt, toolboxFullScreen } from "@/utils/utils";
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String,
    },
    chartData: {},
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
    };
  },
  computed: {
    ...mapState(["curChartConfig"]),
  },
  methods: {
    getCurChartConfig() {
      if (Object.keys(this.curChartConfig).length > 0) {
        let colors = [];
        this.curChartConfig.colors.forEach((v) => {
          colors.push(v.color);
        });
        this.colors = [...colors, ...Ecolors.color];
      }
      if (Object.keys(this.chartData).length > 0) {
        this.init();
      }
    },
    getSeriesData() {
      let seriesData = [];
      return seriesData;
    },
    init() {
      let data = [
        [10, 40, '2000'],
        [50, 100, '2001'],
        [40, 20, '2002'],
        [70, 60, '2003'],
      ]
      let option = {
        tooltip: {
          // position: "top",
          // formatter: (params) => {
          //   return `相关度：${series[params.dataIndex]}`;
          // },
        },
        grid: {
          left: 20,
          right: 20,
          top: 20,
          containLabel: true,
          bottom: 10,
        },
        xAxis: {
          // axisLabel: {
          //   show: false,
          // },
        },
        yAxis: {
          // axisLabel: {
          //   show: false,
          // },
        },
        series: [
          {
            type: "line",
            label: {
              show: true,
              formatter: data => {
                return data.data[2]
              }
            },
            data: [
              [10, 40, '2000'],
              [50, 100, '2001'],
              [40, 20, '2002'],
              [70, 60, '2003'],
            ],
            // encode: { tooltip: [0, 1] },
            // symbolSize: (value, params) => {
            //   let num = series[params.dataIndex];
            //   return num > 10 ? num : 10;
            // },
            // itemStyle: {
            //   normal: {
            //     label: {
            //       color: "#333",
            //       show: true,
            //       position: "inside",
            //       formatter: function (params, ticket, callback) {
            //         var s = params.dataIndex;
            //         return s;
            //       },
            //     },
            //   },
            // },
          },
        ]
      };
      
      this.chart.clear()
      this.chart.setOption(option);

      this.$emit("chartDom", this.chart);

      // 后台报告下载
      // this.chart.on("finished", () => {
      //   let tempId = this.$route.query.tempId;
      //   if (tempId) {
      //     this.getEchartImg(this.chart.getDataURL());
      //   }
      // });
    },
    getEchartImg(base) {
      window.echartImg = base;
    },
  },
  watch: {
    curChartConfig: {
      deep: true,
      handler: function () {
        this.getCurChartConfig();
      },
    },
    chartData() {
      if (Object.keys(this.chartData).length <= 0) {
        if (this.chart) this.chart.clear();
      } else {
        this.getCurChartConfig();
      }
    },
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId));
    this.init();
    // this.getCurChartConfig();
  },
  destroyed() {
    this.chart.dispose();
    this.chart = null;
  },
};
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  // background-color: #fff;
}
</style>